<template>
  <div class="chat_bg" v-if="!loading">
    <el-container height="620px">
      <el-aside height="620px" width="300px" class='el_aside'>
        <ul class="left" v-if="tableData.length>0">
          <li @click="checked(item)" v-for="(item,index) in tableData" :key="index" :class="userId==item.userId?'left_item_active d-s-s':'left_item d-s-s'">
            <div><img class="left_item_img" :src="item.avatarUrl" alt=""/></div>
            <div class="flex-1">
              <div class="left_item_name">{{item.nickName}}</div>
              <div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.msgType==0">
                {{item.newMessage.content}}</div>
              <div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.msgType==1">[圖片]</div>
              <div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.msgType==2">[商品]</div>
            </div>
            <div v-if="item.newMessage!=null">{{item.newMessage.createTime}}</div>
            <div><span class="close_chat icon iconfont icon-shanchu" @click="closeChat(index,item.relationId)"></span></div>
          </li>
        </ul>
        <ul v-else>
          <div class="notable">暫無用戶諮詢</div>
        </ul>
      </el-aside>
      <el-container>
        <div v-if="!is_open_socket" class="red danger_tip">當前未連接到伺服器，請檢查網路或聯繫平台是否已開啟線上客服</div>
        <el-main class='right'>
          <el-header class="chat_header">
            <div class="content_title">{{conversation}}</div>
          </el-header>
          <el-main>
            <ul class="infinite-list" style="overflow:auto" ref='container'>
              <li v-for="(item,index) in content_list" :key="index" v-if="content_list!=''">
                <div :class="item.sendType == 1 ? 'im_text':'im_text2'" class="m-item">
                  <img class="avatar" v-if="item.sendType==2" :src="userInfo.avatarUrl"/>
                  <img class="avatar" v-if="item.sendType==1" :src="supplierLogo"/>
                  <div>
                    <div class="my_date">{{item.createTime}}</div>
                    <div v-if="item.msgType==0" :class="item.sendType == 1?'my_content':'you_content'">
                      <div>{{item.content}}</div>
                    </div>
                    <div v-if="item.msgType==1" :class="item.sendType == 1?'my_content':'you_content'">
                      <img @click="clickImg(item.content)" class="cont_img" :src="item.content"/>
                    </div>
                    <div v-if="item.msgType==2" :class="item.sendType == 1?'my_content':'you_content'">
                      <div class="product_txtitem">
                        <div>
                          <img class="pro_img" :src="item.content.productImg"/>
                        </div>
                        <div>
                          <div class="pro_txtname">{{item.content.productName}}</div>
                          <div class="pro_price">￥{{item.content.productPrice}}</div>
                        </div>
                      </div>
                    </div>
                    <div v-if="item.msgType==3" :class="item.sendType == 1?'my_content':'you_content'">
                      <div class="product_txtitem">
                        <div>
                          <img class="pro_img" :src="item.content.productImg"/>
                        </div>
                        <div>
                          <div class="pro_txtname">{{item.content.productName}}</div>
                          <div class="pro_price">共計{{item.content.orderNum}}件商品：合計￥{{item.content.orderPrice}}
                          </div>
                        </div>
                        <div>
                          <div class="f12 gray6">訂單編號：{{item.content.orderNo}}</div>
                          <div class="f12 gray6">建立時間：{{item.content.createTime}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </el-main>
          <div v-if="userId!=0" class="bg-white">
            <div>
              <span class="icon iconfont icon-tupian" @click="isupload = true"></span>
            </div>
            <div>
              <el-input class="chat_input" resize="none" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="請輸入內容" v-model="content">
              </el-input>
            </div>
            <div class="pr btnbox"> <button class="send_btn" @click="sendMessage">傳送訊息</button></div>
          </div>
        </el-main>
        <el-aside class='user_info' width="300px">
          <div>
            <el-tabs v-model="activeName" @tab-change="handleClick">
              <el-tab-pane label="客戶資訊" name="first">
                <div>
                  <h2 class="mb18">客戶資訊</h2>
                  <ul>
                    <li>
                      <div class="item_top">客戶名稱</div>
                      <div v-if="userInfo&&userInfo.nickName" class="item_btm">{{userInfo.nickName}}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">聯絡方式</div>
                      <div v-if="userInfo&&userInfo.mobile" class="item_btm">{{userInfo.mobile}}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">客戶地址</div>
                      <div v-if="userInfo&&userInfo.city" class="item_btm">{{userInfo.province}}省{{userInfo.city}}市</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                    <li>
                      <div class="item_top">客戶性別</div>
                      <div v-if="userInfo&&(userInfo.gender==0||userInfo.gender==1)" class="item_btm">{{userInfo.gender ? "男" : "女"}}</div>
                      <div v-else class="item_btm">-</div>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="交易訂單" name="second">
                <div class="order_list">
                  <div class="order_item" v-for="(item,index) in orderList" :key="index">
                    <div class="order_item_top d-b-c mb8">
                      <div class="item_status blue">{{item.deliveryStatusText}}</div>
                      <div>{{item.createTime}}</div>
                    </div>
                    <div class="mb8">
                      <div class="d-s-s" v-for="(proitem,proindex) in item.productList" :key="proindex">
                        <div><img class="order_img" :src="proitem.imagePath" alt=""/></div>
                        <div>
                          <div>{{proitem.productName}}</div>
                          <div v-if="proitem.isUserGrade==1">￥{{proitem.gradeProductPrice}}X{{proitem.totalNum}}
                          </div>
                          <div v-else>￥{{proitem.productPrice}}X{{proitem.totalNum}}</div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div>訂單編號：{{item.orderNo}}</div>
                      <div>付款時間：{{item.payTime}}</div>
                      <div>實收款：￥{{item.payPrice}}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

        </el-aside>
      </el-container>

      <!--上传图片-->
    </el-container>
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc"></Upload>
  </div>
</template>

<script>
import ServiceApi from '@/api/service.js';
import SettingApi from '@/api/setting.js';
import FileApi from '@/api/file.js';
import Upload from '@/components/file/Upload.vue';
import { getStorage } from '@/utils/storageData';
import { setCookie, getCookie } from '@/utils/base';
export default {
  data() {
    return {
      baseInfo: getStorage('userInfo'),
      loading: false,
      path: getStorage('socket_url'),
      socketTask: "",
      // 确保websocket是打开状态
      is_open_socket: false,
      content: '',
      /*列表数据*/
      tableData: [],
      pageSize: 20,
      /* 联系人页数*/
      curPage: 1,
      /* 聊天记录页数*/
      repage: 1,
      userId: 0,
      appId: 0,
      supplierUserId: 0,
      conversation: "會話",
      content_list: [],
      /* 聊天滚动条高度*/
      scrollHeight: 0,
      nomore: false,
      isupload: false,
      /*当前图片类别*/
      type: null,
      file_path: '',
      logo_file_path: '',
      user_logo_file_path: '',
      intervalId: null,
      centerDialogVisible: false,
      chooseimg: '',
      userInfo: {},
      activeName: "second",
      orderList: [],
      is_destory: false
    };
  },
  components: {
    Upload
  },
  watch: {},
  mounted() {
    // 初始化
    this.init();
    this.getTableList();
    const container = this.$refs.container;
    //这里的定时是为了列表首次渲染后获取scrollHeight并滑动到底部。
    setTimeout(() => {
      this.scrollHeight = container.scrollHeight;
    }, 800);
    container.addEventListener('scroll', e => {
      //这里的2秒钟定时是为了避免滑动频繁，节流
      setTimeout(() => {
        //滑到顶部时触发下次数据加载
        if (e.target.scrollTop == 0 && !this.nomore) {
          //将scrollTop置为10以便下次滑到顶部
          e.target.scrollTop = 10;
          //加载数据
          this.initData();
          //这里的定时是为了在列表渲染之后才使用scrollTo。
          this.$nextTick(() => {
            let scrollH = this.$refs.container.scrollHeight - this.scrollHeight;
            e.target.scrollTo(0, scrollH + 30); //-30是为了露出最新加载的一行数据
          });
        }
      }, 2000);
    });
  },
  destroyed() {
    // 销毁监听
    this.closeSocket();
  },
  methods: {
    init: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的瀏覽器不支援socket");
      } else {
        //let _data = getCookie('baseInfo_supplier');
        let json = this.baseInfo;
        //let json = JSON.parse(_data);
        this.supplierUserId = json && json.supplierUserId;
        this.appId = json && json.appId;
        let url = this.path + '/socket?userId=' + this.supplierUserId + '&usertype=service';
        // 实例化socket
        this.socketTask = new WebSocket(url);
        // 监听socket连接
        this.socketTask.onopen = this.open;
        // 监听socket关闭
        this.socketTask.onclose = this.onclose;
        // 监听socket错误信息
        this.socketTask.onerror = this.error;
      }
    },
    open: function () {
      let self = this;
      console.log("socket连接成功");
      self.is_open_socket = true;
      // 开始发送心跳
      self.startHeart();
      // 注：只有连接正常打开中 ，才能正常收到消息
      self.socketTask.onmessage = self.getMessage;
    },
    startHeart() {
      let self = this;
      let data = JSON.stringify({
        type: 'ping',
        to: self.userId,
        from: self.supplierUserId,
        sendType: 1
      });
      self.intervalId = setInterval(function () {
        console.log("发送心跳");
        self.send(data);
      }, 10000);
    },
    /*socket关闭*/
    onclose() {
      let self = this;
      if (self.is_destory) {
        return;
      }
      console.log("已经被关闭了");
      //重连机制
      self.socketTask = null;
      self.is_open_socket = false;
      clearInterval(self.intervalId);
      self.init();
    },
    error: function () {
      console.log("连接错误");
    },
    closeSocket: function () {
      console.log("连接关闭");
      let self = this;
      self.is_destory = true;
      if (self.socketTask == null) {
        return;
      }
      let data = JSON.stringify({
        type: 'close',
        from_id: self.my_id,
        to: self.user_id
      });
      self.send(data);
      self.socketTask.close();
      self.socketTask = null;
      self.is_open_socket = false;
      clearInterval(self.intervalId);
    },
    getMessage: function (msg) {
      let newdata = JSON.parse(msg.data);
      console.log(newdata);
      let date = new Date();
      if (!newdata.content && !newdata.contentJson) {
        return false;
      }
      if (newdata.contentJson) {
        newdata.content = newdata.contentJson;
      }
      /* 接收到非状态消息 */
      // 播放声音
      this.relist();
      let audio = new Audio();
      audio.src = "./static/imgs/notice.mp3";
      audio.play();
      console.log('播放声音');
      /* 收到当前用户的消息*/
      console.log('------------------' + this.userId);
      if (newdata.userId == this.userId) {
        let item = {
          content: newdata.content,
          from: newdata.userId,
          msgType: newdata.msgType,
          sendType: 2,
          createTime: this.formatDate(),
          avatarUrl: this.userInfo.avatarUrl
        };
        this.content_list = [...this.content_list, item];
        this.$nextTick(() => {
          this.$refs.container.scrollTop = this.$refs.container.scrollHeight;
        });
      }
      if (this.tableData.length >= 1) {
        let flag = false;
        let n = 0;
        this.tableData.forEach((olditem, index) => {
          if (olditem.userId == newdata.userId) {
            flag = true;
            n = index;
          }
        });
        if (flag) {
          this.tableData[n].newMessage.content = newdata.content;
          this.tableData[n].newMessage.msgType = newdata.msgType;
          this.tableData[n].newMessage.createTime = this.formatDate();
          this.relist();
        } else {
          if (newdata.userId) {
            ServiceApi.getinfo({
              userId: newdata.userId
            }, true).then(res => {
              this.tableData.unshift({
                avatarUrl: res.data.userInfo.avatarUrl,
                nickName: res.data.userInfo.nickName,
                userId: res.data.userInfo.userId,
                newMessage: {
                  content: newdata.content,
                  createTime: newdata.createTime,
                  msgType: newdata.msgType
                }
              });
            });
          }
        }
      } else {
        ServiceApi.getinfo({
          userId: newdata.userId
        }, true).then(res => {
          this.tableData.unshift({
            avatarUrl: res.data.userInfo.avatarUrl,
            nickName: res.data.userInfo.nickName,
            userId: res.data.userInfo.userId,
            newMessage: {
              content: newdata.content,
              createTime: newdata.createTime,
              msgType: newdata.msgType
            }
          });
        });
      }
      console.log('收到消息');
    },
    newData() {
      let self = this;
      let Params = {};
      Params.userId = self.userId;
      Params.page = 1;
      ServiceApi.recordlist(Params, true).then(data => {
        self.loading = false;
        let list = data.data.list.data;
        self.content_list = [...self.content_list, list[0]];
      }).catch(error => {});
    },
    send(data) {
      let self = this;
      // 未连接
      if (!self.is_open_socket) {
        return;
      }
      self.socketTask.send(data);
    },
    handleClick(tab) {
      self.activeName = tab;
    },
    sendMessage() {
      let self = this;
      if (self.content == '') {
        return false;
      }
      // 未连接
      if (!self.is_open_socket) {
        return;
      }
      let data = JSON.stringify({
        sendType: 1,
        to: self.userId,
        from: self.supplierUserId,
        msgType: 0,
        type: 'msg',
        content: self.content
      });
      let newdata = JSON.parse(data);
      let item = {
        sendType: 1,
        content: newdata.content,
        type: newdata.type,
        msgType: 0,
        type: 'msg',
        createTime: self.formatDate()
      };
      self.content_list = [...self.content_list, item];
      self.socketTask.send(data);
      self.content = '';
      self.$nextTick(() => {
        self.relist();
        self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
      });
    },
    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = {};
      Params.limit = 100;
      Params.nickName = '';
      self.loading = true;
      ServiceApi.servicelist(Params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.userList;
        if (self.tableData.length > 0) {
          self.checked(self.tableData[0]);
        }
      });
    },
    initData() {
      this.repage++;
      this.getRecordlist();
    },
    getRecordlist() {
      let self = this;
      let Params = {};
      Params.userId = self.userId;
      Params.pageIndex = self.repage;
      Params.pageSize = 15;
      ServiceApi.recordlist(Params, true).then(res => {
        self.loading = false;
        for (let i = 0; i < res.data.records.length; i++) {
          if (res.data.records[i].contentJson) {
            res.data.records[i].content = res.data.records[i].contentJson;
          }
        }
        let list = res.data.records.reverse();
        self.content_list = [...list, ...self.content_list];
        console.log(self.content_list);
        if (res.data.lastPage <= self.repage) {
          self.nomore = true;
        }
        this.scrollHeight = this.$refs.container.scrollHeight;
        if (self.repage == 1) {
          self.$nextTick(() => {
            self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
          });
        }
      }).catch(error => {});
    },
    checked(item) {
      this.userId = item.userId;
      this.conversation = item.nickName;
      this.user_logo_file_path = item.avatarUrl;
      this.content_list = [];
      this.userInfo = {};
      this.repage = 1;
      this.nomore = false;
      this.getRecordlist();
      this.getUserinfo();
    },
    DateToHM(string) {
      let myDate = new Date();
      let newsDate = new Date(string);
      if (string) {
        if (myDate.toLocaleDateString() == newsDate.toLocaleDateString()) {
          var f = string.split(' ', 2);
          var t = (f[1] ? f[1] : '').split(':', 3);
          var hm = t[0] + ':' + t[1];
          return hm;
        } else {
          return newsDate.toLocaleDateString();
        }
      } else {
        return '';
      }
    },
    /*关闭选择图片*/
    returnImgsFunc(e) {
      let self = this;
      console.log(e);
      if (e != null && e.length > 0) {
        let data = JSON.stringify({
          sendType: 1,
          to: self.userId,
          from: self.supplierUserId,
          msgType: 1,
          type: 'msg',
          content: e[0].filePath
        });
        let newdata = JSON.parse(data);
        let date = new Date();
        let item = {
          sendType: 1,
          content: newdata.content,
          type: newdata.type,
          msgType: 1,
          type: 'msg',
          createTime: self.formatDate()
        };
        this.content_list = [...this.content_list, item];
        self.socketTask.send(data);
        self.$nextTick(() => {
          self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
        });
      }
      self.isupload = false;
    },
    clickImg(path) {
      this.centerDialogVisible = true;
      this.chooseimg = path;
    },
    closeChat(i, relationId) {
      this.tableData.splice(i, 1);
      if (relationId) {
        ServiceApi.remove({
          relationId: relationId
        }, true).then(res => {});
      }
    },
    relist() {
      let self = this;
      let Params = {};
      Params.limit = 100;
      Params.nickName = '';
      ServiceApi.servicelist(Params, true).then(res => {
        self.tableData = res.data.userList;
      });
    },
    formatDate(time) {
      let date = new Date();
      if (time) {
        date = new Date(time);
      }
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      return `${year}/${month}/${day} ${hour}:${minute}`;
    },
    getUserinfo() {
      let self = this;
      ServiceApi.getinfo({
        userId: this.userId
      }, true).then(res => {
        self.userInfo = res.data.userInfo;
        self.orderList = res.data.orderList;
        self.supplierLogo = res.data.logo;
      });
    },
    dateConversion(str) {
      let date = '';
      date = new Date(Date.parse(str.replace(/-/g, "/")));
      date = date.getTime();
      return date;
    },
    /*选择上传图片*/
    fileChange(e) {
      console.log(e);
    },
    /*选择图片之前*/
    onBeforeUploadImage(file) {
      const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';
      const isLt1M = file.size / 1024 / 1024 < 2;
      if (!isIMAGE) {
        ElMessage.error("上傳檔案只能是圖片格式！");
      }
      if (!isLt1M) {
        ElMessage.error("上傳檔案大小不能超過 2MB！");
      }
      return isIMAGE && isLt1M;
    }
  }
};
</script>

<style>
.mb8 {
    margin-bottom: 8px;
  }

  .left {
    background-color: #F0F0F0;

  }

  .right {
    margin-left: 30px;
    background-color: rgba(242, 242, 242, 0.5);
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
    margin: 5px;
  }

  .left_item {
    padding: 8px 15px;
    border-bottom: 1px solid #cccccc;
    background: #F0F0F0;
  }

  .left_item_active {
    padding: 8px 15px;
    border-bottom: 1px solid #cccccc;
    background: #FFFFFF;
  }

  .left_item_img {
    width: 40px;
    height: 40px;
  }

  .left_item_name {
    font-size: 14px;
    margin-left: 10px;
  }

  .left_item_content {
    color: rgb(153, 153, 153);
    font-size: 12px;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .im_text {
    /* width: 100%; */
    display: flex;
    margin-top: 30px;
    flex-direction: row-reverse;
    position: relative;
  }

  .im_text2 {
    /* width: 100%; */
    display: flex;
    margin-top: 30px;
    position: relative;
  }

  .im_text .avatar {
    width: 40px;
    height: 40px;
    margin-left: 5px;
    border-radius: 10px;
    background-color: #000000;
    align-items: flex-start;
  }

  .im_text2 .avatar {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    border-radius: 10px;
    background-color: #000000;
    align-items: flex-start;
  }

  .you_content,
  .my_content {
    background-color: #FFFFFF;
    margin-top: 15px;
  }

  .im_text .my_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .im_text2 .my_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .im_text .you_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .im_text2 .you_content {
    max-width: 450px;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-all;
  }

  .infinite-list {
    height: 400px;
    padding: 15px;
  }

  .el-main {
    padding: 0;

  }

  .chat_header {
    border-bottom: 1px solid #CACACA;
    margin-bottom: 10px;
    line-height: 60px;
    background-color: #FFFFFF;
  }

  .content_title {
    font-size: 16px;
  }

  .my_content {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  }

  .you_content {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  }

  .pro_img {
    height: 100px;
    width: 100px;
    border-radius: 10px;
    background-color: #FFFFFF;
  }

  .pro_txtname {
    max-width: 100px;
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .pro_price {
    font-size: 12px;
    color: #E2231A;
  }

  .chat_input {
    border: none;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: normal;
    color: #000000;
    text-align: left;
    border-width: 0px;
    outline: none;
    margin-bottom: 10px;
    width: 95%;


  }

  .chat_input textarea {
    outline: none;
    border: none;
  }

  .send_btn {
    border-width: 0px;
    width: 100px;
    height: 40px;
    background: inherit;
    background-color: rgba(0, 110, 255, 0.898039215686275);
    border: none;
    border-radius: 2px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
    line-height: 20px;
    position: absolute;
    outline: none;
    right: 7px;
    top: 5px;
  }

  .btnbox {
    height: 50px;
    background-color: #FFFFFF;
  }

  .bg-white {
    background-color: #FFFFFF;
  }

  .cont_img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
  }

  .chat_bg {
    background: rgba(242, 242, 242, 0.5);
    margin: -16px;
    height: calc(100vh - 90px);
  }

  .el_aside {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
    margin: 5px;
  }

  .icon-tupian:hover {
    color: #1296db;
  }

  .notable {
    text-align: center;
    background: #ffffff;
    padding: 30px;
    font-size: 17px;
  }

  .my_date {
    color: #cccccc;
    font-size: 12px;
    position: absolute;
    top: -10px;
  }

  .im_text .my_date {
    right: 45px;
  }

  .user_info {
    box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
    margin: 5px;
    background-color: #FFFFFF;
    padding: 30px;
    max-height: calc(100vh - 128px);
  }

  .item_top {
    color: #CCCCCC;
    margin-bottom: 8px;
  }

  .item_btm {
    font-size: 13px;
    color: #333333;
    margin-bottom: 18px;
  }

  .order_img {
    width: 50px;
    height: 50px;
  }

  .order_item_top {
    background-color: #f3f3f3;
    padding: 5px 16px;
    border-radius: 6px;
    margin-top: 18px;
  }

  .danger_tip {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .avatar-uploader .icon-tupian.icon.iconfont {
    font-size: 22px;
    margin-left: 10px;
  }

  .left .icon-shanchu.icon.iconfont {
    cursor: pointer;
    color: #999999;
    font-size: 14px;
    margin-left: 5px;
  }
</style>

